<template>
    <BaseDialog fullscreen :loading="loading" destroy-on-close @confirm="save" @close="close" confirmText="保存"
                v-model="isShow" title="代码生成">
        <div class="w-full h-full flex">
            <div class="h-full" style="width: 500px">
                <el-card class="h-full">
                    <template #header>
                        <div class="card-header">
                            <span>表信息</span>
                        </div>
                    </template>
                    <el-form :model="state.dataForm" label-width="100px">
                        <el-form-item label="表名称" prop="tableName">
                            <el-input placeholder="请输入表名称" v-model="state.dataForm.tableName"/>
                        </el-form-item>
                        <el-form-item label="类名称" prop="className">
                            <el-input placeholder="请输入类名称" v-model="state.dataForm.className"/>
                        </el-form-item>
                        <el-form-item label="描述名称" prop="descName">
                            <el-input placeholder="请输入描述名称" v-model="state.dataForm.descName"/>
                        </el-form-item>
                        <el-form-item label="前端相对路径" prop="frontEndPath">
                            <el-input placeholder="请输入前端相对路径" v-model="state.dataForm.frontEndPath"/>
                        </el-form-item>
                        <el-form-item label="后端相对路径" prop="afterEndPath">
                            <el-input placeholder="请输入后端相对路径" v-model="state.dataForm.afterEndPath"/>
                        </el-form-item>
                        <el-form-item label="包路径" prop="packagePath">
                            <el-input placeholder="请输入包路径" v-model="state.dataForm.packagePath"/>
                        </el-form-item>
                        <el-form-item label="作者" prop="author">
                            <el-input placeholder="请输入作者" v-model="state.dataForm.author"/>
                        </el-form-item>
                        <el-form-item label="模块名称" prop="modelName">
                            <el-input placeholder="请输入模块名称" v-model="state.dataForm.modelName"/>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
            <div class="h-full pl-2.5 flex-1 w-0 overflow-auto">
                <el-tabs type="border-card" class="h-full tabs-full">
                    <el-tab-pane label="字段信息">
                        <BaseEditTable :tableAttr="{height: '100%'}" ref="fieldsRef"  :columns="columns">
                            <template #operate="scope,item">
                                <el-button size="small" type="primary">扩展</el-button>
                            </template>
                        </BaseEditTable>
                    </el-tab-pane>
                    <el-tab-pane label="子副表">
                        <div class="h-full flex flex-col">
                            <div class="flex flex-row-reverse">
                                <el-button class="mb-1.5" @click="selectSonTable" type="primary">选择字表</el-button>
                            </div>
                            <div class="flex-1 h-0">
                                <BaseEditTable ref="tableSonRef" :tableAttr="{height: '100%'}"
                                              :columns="tableColumns">
                                    <template #operate="scope,item">
                                        <el-button size="small" type="danger">删除</el-button>
                                    </template>
                                </BaseEditTable>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>

            </div>
            <SelectSonTable @load="getSonTableRow" ref="selectSonTableRef"></SelectSonTable>
        </div>
    </BaseDialog>
</template>

<script setup lang="ts">
import {nextTick, onMounted, reactive, ref} from "vue";
import {TableInfoModel, TableSonModel} from "/@/api/generator/model/TableInfoModel";
import {
    fieldTypeOptions,
    screenOptions,
    columns,
    componentTypeOptions,
    tableSonTypeOptions,
    tableColumns,
    fieldsTableRules, fieldsSonTableRules
} from './ts/CreateCode'
import {useDictStore} from "/@/store/modules/dict";
import SelectSonTable from "/@/views/tool/code/create/SelectSonTable.vue";
import {updateTableInfoByTableId} from "/@/api/generator/TableInfoApi";
import BaseEditTable from "/@/components/Base/BaseEditTable/index.vue";

const selectSonTableRef = ref()
const tableSonRef = ref()
const fieldsRef = ref()
const emit = defineEmits(['load'])
const state = reactive({
    dataForm: {
        tableId: '',
        tableName: '',
        className: '',
        descName: '',
        frontEndPath: '',
        afterEndPath: '',
        params: '',
        fields: [],
        packagePath: '',
        tableSons: [],
        author: '',
        modelName: ''
    } as TableInfoModel
})
const loading = ref(false)
const isShow = ref(false)

const init = async (data: TableInfoModel) => {
    state.dataForm = data
    isShow.value = true
    await nextTick()
    fieldsRef.value.setData(state.dataForm.fields)
    fieldsRef.value.setRules(fieldsTableRules)
    tableSonRef.value.setData(state.dataForm.tableSons)
    tableSonRef.value.setRules(fieldsSonTableRules)
}
const save = async () => {
    loading.value = true
    await fieldsRef.value.validate()
    await tableSonRef.value.validate()
    state.dataForm.fields = fieldsRef.value.getData()
    state.dataForm.tableSons = tableSonRef.value.getData()
    await updateTableInfoByTableId(state.dataForm, () => {
        loading.value = false;
    })
    emit("load")
    close()
}

/**
 * 选择子表
 */
const selectSonTable = () => {
    selectSonTableRef.value.init()
}

const close = () => {
    state.dataForm = {
        tableId: '',
        tableName: '',
        className: '',
        descName: '',
        frontEndPath: '',
        afterEndPath: '',
        params: '',
        fields: [],
        packagePath: '',
        tableSons: [],
        author: '',
        modelName: ''
    }
    isShow.value = false
}
/**
 * 子表选择回调
 */
const getSonTableRow = (rows: TableSonModel[]) => {
    let tableIds = state.dataForm.tableSons.map(res => res.tableId);
    let selectRows = rows.filter(res => !tableIds.includes(res.tableId));
    selectRows.forEach(res => {
        res.tableSubId = res.tableId
        res.tableId = state.dataForm.tableId
        res.type = 1
    })
    tableSonRef.value.addAll(selectRows)
}


onMounted(async () => {
    let dictStore = useDictStore();
    fieldTypeOptions.value = await dictStore.getDict('data_type')
    screenOptions.value = await dictStore.getDict('screen_code');
    componentTypeOptions.value = await dictStore.getDict('component_type');
    tableSonTypeOptions.value = await dictStore.getDict("table_son_type");
})
defineExpose({init})
</script>

<style scoped>

</style>